<template>
    <span :class="props.name" :style="{ fontSize: iconSize, color: props.color }"></span>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue"


interface Props {
    name?: string,
    size?: number | string,
    color?: string
}

const props = withDefaults(defineProps<Props>(), {
    size: 16,
    color: "white"
})


//像下面这样做就使 prop 和后续更新无关了
const iconSize = ref(`${props.size}px`)



</script>



<!-- // Icon.vue
<template>
    <div>
        <span ref="elRef" :class="[$attrs.class, 'anticon']" :style="getWrapStyle"></span>
    </div>
</template>
<script lang="ts" setup>
interface Props {
  icon: string; //icon的名字
  size?: number; //字体大小
  color?: string; //字体颜色
}
import { renderSVG } from "@iconify/iconify";
import { onMounted, ref, unref, nextTick, computed, CSSProperties } from "vue";
const props = withDefaults(defineProps<Props>(), {
  size: 16,
  color: "white"
});

const elRef = ref<Element>();
const getWrapStyle = computed((): CSSProperties => {
  return {
    color: props.color,
    fontSize: `${props.size}px`,
    display: "inline-flex"
  };
});

const update = async () => {
  const el = unref(elRef);
  if (!el) return;
  await nextTick();
  const svg = renderSVG(props.icon);
  if (!svg) {
    const span = document.createElement("span");
    span.className = "iconify";
    span.dataset.icon = props.icon;
    el.textContent = "";
    el.appendChild(span);
  } else {
    el.textContent = "";
    el.appendChild(svg);
  }
};

onMounted(() => {
  update();
});
</script>
<style lang="scss" scoped></style> -->


